<template lang="pug">
  kalix-master
    div.box
      div.top
        div.topSon
          span.brief 教师简介
          span.give {{user.name}}
      div.hezi
      div.content
        div.TeacherTop
          div.TeacherTopL
            h1 教师简介>>
            p TEACHERS PROFILE
            img.TeacherImg(:src="user.icon" width="470" height="300")
          div.TeacherTopR
            span {{user.name}}
            div.zhuangshi
            div.text
              p {{user.intro}}
        div.TracherBottom
          div.TracherBottomL
            div
              h1.color 所授课程>>
              p COURSES TAUGHT
            div.xian
            div.dis
              h1 优秀教师
              p Excellent Teachers
            div.dis
              h1 精品课程
              p Excellent Coutses
          div.TracherBottomR
            ul
              li.liebiao(v-for="(item, index) in boxLi" v-if="index < 6")
                router-link(:to="{path:'/videopage/'+item.id}")
                  img(:src="item.photo"  height="125" width="150")
                  p {{item.name}}
</template>

<script type="text/ecmascript-6">
  export default {
    data() {
      return {
        uid: null,
        user: [],
        boxLi: []
      }
    },
    mounted() {
      this.uid = this.$route.params.uid
      this.getIntro()
      this.getCourseByUid()
    },
    methods: {
      getIntro() {
        console.log('uid============', this.uid)
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/users/' + this.uid,
          params: {
            id: this.uid
          }
        }).then(res => {
          console.log('res=========', res.data)
          if (res.data.totalCount > 0) {
            this.user = res.data.data[0]
          }
        })
      },
      getCourseByUid() {
        this.axios.request({
          method: 'GET',
          url: '/camel/rest/training/course/getCourseAllByUid',
          params: {
            uid: this.uid
          }
        }).then(res => {
          console.log('res----------', res.data)
          if (res.data.totalCount > 0) {
            this.boxLi = res.data.data
          }
        })
      }
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  .box
    width 100%
    position relative

  .top
    width 100%
    border-top 1px silver dashed
    position absolute
    top 50px

  .topSon
    width 170px
    position absolute
    top -15px
    left 50%
    margin-left -72px
    background-color #fff
    text-align center

  .brief
    display inline-block
    width 87px
    height 25px
    line-height 25px
    background-color #008F95
    color #fff
    font-size 18px
    text-align center

  .give
    font-size 14px
    color #929292
    margin-left 10px

  .hezi
    height 120px

  .content
    width 1200px
    margin 0 auto

  .TeacherTop
    width 100%
    height 500px
  /*background-color pink*/

  .TeacherTopL
    width 49%
    float left
    height 100%
    padding-left 117px
    box-sizing border-box
    /*background-color #ccc*/
    h1
      font-size 26px
      color #008F95
    p
      font-size 16px
      color #969696
      margin-top 20px

  .TeacherTopR
    width 49%
    float right
    height 100%
    position relative
    /*background-color #C2C55F*/
    span
      font-size 18px
      color #008F95
      margin-left 235px

  .text
    margin-top 44px
    color #636363
    text-indent 2em
    p
      height 35px
      line-height 35px

  .TracherBottom
    width 100%
    height 330px
  /*background-color: green*/

  .TracherBottomL
    width 45%
    float left
    height 100%
    /*background-color #FF8040*/
    text-align right
    padding-top 20px
    box-sizing border-box
    h1
      font-size 20px
      margin-bottom 10px
    p
      color #505050
      font-size 14px

  .TracherBottomR
    width 54%
    float right
    height 100%
    overflow hidden

  .color
    color #008F95

  .dis
    display inline-block
    margin-left 10px

  .xian
    width 100%
    height 1px
    background-color #999
    margin 10px 0

  .liebiao
    display inline-block
    margin 10px 30px
    width 150px
    height 150px
    position relative
    img
      width 100%
      height 100%
    p
      display block
      width 150px
      height 30px
      line-height 30px
      position absolute
      left 50%
      bottom 0
      margin-left -75px
      text-align center
      background rgba(0,0,0,0.5)
      color #fff
  .TeacherImg
    margin-top 40px

  .zhuangshi
    position absolute
    top 10px
    left 322px
    width 44px
    height 1px
    background-color #999
</style>
